import React, { memo } from 'react'
import { renderRoutes } from 'react-router-config';
import { Link, useLocation } from 'react-router-dom'
import './botton.css'
import { connect } from 'react-redux'
import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon'
import { actionCreators } from '../../pages/Main/store';
import my from '../../../src/assets/images/车友圈.png';
import friend from '../../../src/assets/images/我的.png';
import select from '../../../src/assets/images/选车.png';
import main from '../../../src/assets/images/首页.png';


const Bottom = (props) => {
    // const index = 0;
    let { route, index, num } = props;
    const { pathname } = useLocation()
    // 根据用户的路由地址匹配index 非首页
    index = route.routes.findIndex(item => item.path == pathname) - 1
    const { changeIndex } = props;
    return (
        <>

            {/* fdfdasfafaafdas */}
            {/* 二级路由而准备 */}
            {renderRoutes(route.routes)}
            <ul className="Botton-warper">
                <li
                    onClick={() => { changeIndex(0) }}
                    className="Botton-warper-warp"
                    key="1">
                    <Link to="/home/main"
                        style={{ textDecoration: "none" }}>
                        <div>
                            <div className="icon" style={index === 0 ? { display: "none" } : {}}>
                                <img src={main} alt="" />
                            </div>
                            <div className="icon1" style={index === 0 ? {} : { display: "none" }} >
                                <img src={main} alt="" />
                            </div>
                            <div
                                className="planet">首页</div>
                        </div>
                    </Link>
                </li>
                <li
                    onClick={() => { changeIndex(1) }}
                    className="Botton-warper-warp"
                    key="2">
                    <Link to="/home/server"
                        style={{ textDecoration: "none" }}>
                        <div>
                            <div className="icon" style={index === 1 ? { display: "none" } : {}}>
                                <img src={select} alt="" />
                            </div>
                            <div className="icon1" style={index === 1 ? {} : { display: "none" }} >
                                <img src={select} alt="" />
                            </div>
                            <div
                                className="planet">选车</div>
                        </div>
                    </Link>
                </li>
                <li
                    onClick={() => { changeIndex(2) }}
                    className="Botton-warper-warp"
                    key="3">
                    <Link to="/home/info"
                        style={{ textDecoration: "none" }}>
                        <div>
                            <div className="icon" style={index === 2 ? { display: "none" } : {}}>
                                <img src={friend} alt="" />
                            </div>
                            <div className="icon1" style={index === 2 ? {} : { display: "none" }} >
                                <img src={friend} alt="" />
                            </div>
                            <div
                                className="planet">车友圈</div>
                        </div>
                    </Link>
                </li>
                <li
                    onClick={() => { changeIndex(3) }}
                    className="Botton-warper-warp"
                    key="4">
                    <Link to="/home/my"
                        style={{ textDecoration: "none" }}>
                        <div>
                            <div className="icon" style={index === 3 ? { display: "none" } : {}}>
                                <img src={my} alt="" />
                            </div>
                            <div className="icon1" style={index === 3 ? {} : { display: "none" }} >
                                <img src={my} alt="" />
                            </div>
                            <div
                                className="planet">我的</div>
                        </div>
                    </Link>
                </li>
            </ul>
            {/* tabbar位置 */}
        </>
    )
}

const mapStateToProps = (state) => {
    return {
        num: state.main.num,
        index: state.main.index
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeIndex(index) {
            // console.log(index,'----------------');
            console.log(actionCreators.changeIndex(index), '+++++++++++++++++++++++++++');

            dispatch(actionCreators.changeIndex(index))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(memo(Bottom))
